<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>支付测试</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body>
<div class="container-fluid">
	<div class="form-group row">
    <label class="col-sm-2 col-form-label">测试下单地址</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="apiHost" value="http://49.233.92.196:9006/api/pay/pay">
    </div>
  </div>
	<form id="form">
		<div class="form-group row">
			<label class="col-sm-2 col-form-label">响应</label>
			<div class="col-sm-5">
			  <div id="refund-resp"></div>
			</div>
		</div>
		<div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>appId</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="appId" value="3dd441dc9dd34e3777f45bdb">
	    </div>
  	</div>
  	<div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>timestamp</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="timestamp" value="1602043588">
	    </div>
  	</div>
  	<div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>sign</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="sign" value="88888888">
	    </div>
  	</div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>商家网站</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="mchUrl" value="test.com">
	    </div>
	  </div>
	   <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>商户单号</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="orderNo" value="12312312">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>交易金额（整形，单位分，1=0.01元）</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="mchTransAmount" value="154">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>交易币种</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="mchTransCurrency" value="USD">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>语种</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="language" value="En">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">商户返回网址</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="returnUrl" value="http://api.pg.tofu.50shopping.net/api/pay/return">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">商户异步通知接收地址</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="mchNotifyUrl" value="http://api.pg.tofu.50shopping.net/test/testmchnotifysuccess">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">扩展内容</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="attach" value="12343432">
	    </div>
	  </div>

	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>支付类型(2是信用卡)</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="payType" value="2">
	    </div>
	  </div>

	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label title">交易卡信息</label>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">国家</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardCountry" value="US">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">州/省</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardState" value="CA">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">市</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardCity" value="CA">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">详细地址</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardAddress" value="Guangdong Shenzhen futian">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">持卡人姓名</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardFullName" value="Bob.Williams">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">持卡人电话</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardFullPhone" value="1380000000">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">邮编</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardZipCode" value="477200">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">邮箱</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardEmail" value="aa@qq.com">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label title">收货信息</label>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>国家</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grCountry" value="US">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">州/省</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grState" value="CA">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>市</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grCity" value="Los Angeles">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">详细地址</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grAddress" value="Guangdong Shenzhen longgang">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>邮编</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grZipCode" value="477200">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>邮箱</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grEmail" value="gggg@cccc.com">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>收货人电话</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grPhoneNumber" value="1380000000">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>收货人姓名</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="grPerName" value="Ma.Lng">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label title">其他信息</label>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>卡号</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardNo" value="4737029072552715">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">卡种（VISA/MASTER/JCB/AmericanExpress）</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardType" value="VISA">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>有效期年</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardExpireY" value="2022">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>有效期月</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardExpireM" value="10">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>信用卡安全码</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="cardCvv" value="351">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">商品信息</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="goodsInfo" value='[{"goodsName":"商品名称","category":"分类","quantity":"23","goodsPrice": "34"}]'>
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"><span class="required">*</span>来源IP</label>
	    <div class="col-sm-5">
	      <input type="text" class="form-control" name="ipAddress" value='27.38.241.93'>
	    </div>
	  </div>
	  <div class="form-group row">
	  	<div class="col-sm-offset-2 col-sm-5">
		  	<button type="button" class="btn btn-primary" id="submit">提交</button>
		  </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label">响应</label>
	    <div class="col-sm-5">
	      <div id="resp"></div>
	    </div>
	  </div>
	  <div class="form-group row">
	    <label class="col-sm-2 col-form-label"></label>
	    <div class="col-sm-5">
	      <div id="jumping"></div>
	    </div>
	  </div>
	</form>
</div>
</body>
<script type="text/javascript">
	$(function() {
		$("#submit").on("click", function() {
			$.ajax({
				url:      $("#apiHost").val(),
				method:   "post",
				data:     $("#form").serialize(),
				success:  function (resp) {
					$("#resp").text(JSON.stringify(resp))
					// 判断下，如果是有跳转支付地址，那就跳转了
					if (resp.code == 0) {
						if (resp.data.paymentUrl) {
							$("#jumping").text("3s后跳转支付页")
							setTimeout(() => {
								window.open(resp.data.paymentUrl, "_blank")
							}, 3000)
						} else {
							$("#jumping").text("")
						}
					}
				}, error: function (resp) {

				}
			})
			console.log($("#form").serialize())
		});
	});
</script>
<style type="text/css">
input, select{
	width: 300px;
}
.form-group{
	margin-bottom: 5px;
}
.required{
	color: red;
}
.title{
	font-weight: 700;
}
#resp{
	max-width: 100%;
	margin-bottom: 30px;
}
</style>
</html>
